<template>
	<div class="head_nav" :class="{'login_nav': routeName === 'Login' || routeName === 'Register' || routeName === 'CompanyCert'}">
		<div class="knife_container headinfo" >
      <div class="fr headinfo">
        <a class="sep">|</a>
        <router-link :to="{name:'Problem'}">帮助中心</router-link>
      </div>
      <template v-if="hasLogin">
        <router-link :to="{name: 'Index'}" class="welcome">{{routeName === 'Index' ? '刀具联盟, 欢迎你~' : '返回首页'}}</router-link>
        <div class="fr headinfo">
          <span
           v-if="isExam !== ''"
           :class="examineClass"
           @click="$store.state.examine.examresultbox = !examresult_status">{{examTypes[isExam]}}</span>
          <router-link :to="{name: 'memberCenter'}" class="username">
            你好，{{userName}}
            <span class="head-level" v-if="isExam === 1">
              <i class="el-icon-star-on head-level-icon"></i>
              {{level ? `Lv${level}` : 'VIP'}}</span>
          </router-link>
          <a class="sep">|</a>
          <a @click="exit">退出</a>
          <a class="sep">|</a>
          <router-link :to="{name: 'systemMsg'}">消息通知 <span style="position: relative;margin-right: -10px"><sup style="position: relative;top: 3px;left:0" class="elbadge is-dot" v-if="messageNum > 0">{{messageNum > 99 ? '99+': messageNum}}</sup></span></router-link>
          <a class="sep">|</a>
          <router-link :to="{name: 'inquiryMsg'}">询货消息</router-link>
          <a class="sep">|</a>
          <router-link :to="{name: 'orderManage'}">我的订单</router-link>
          <a class="sep">|</a>
          <router-link :to="{name: 'memberCenter'}" class="bubble-parent">
            个人信息
            <span class="bubble animate_twinkle" v-if="(unReceived + levelInfoObj.surplusNum - 0) > 0">您有待领取礼包 <router-link :to="{name: 'giftsCenter'}" class="immediate-get">立即领取</router-link></span>
          </router-link>
        </div>
      </template>
      <template v-else>
        <router-link :to="{name: 'Index'}">{{routeName === 'Index' ? '欢迎注册 刀具联盟~' : '返回首页'}}</router-link>
        <div class="fr headinfo">
          <template v-if="routeName === 'Register'">
            <span class="text register_text">已有账号</span>
            <router-link class="imme-login" :to="{name: 'Login'}">立即登录</router-link>
          </template>
          <template v-else>
            <router-link :to="{name: 'Login'}">您还未登录，<span class="font-yellow">立即登录</span></router-link>
            <a class="sep">|</a>
            <router-link :to="{name: 'Register'}">注册</router-link>
          </template>
        </div>
      </template>
    </div>
	</div>
</template>
<script>
// activityRank
import {Badge, Button} from 'element-ui'
import {mapState, mapActions} from 'vuex'
import {examTypes} from '@/tool/index'
import {systemMes} from '@/service/get-data'
import {clearCookie, getCookie} from '@/config/mUntils'
export default {
  components: {
    elBadge: Badge,
    elButton: Button
  },
  data () {
    return {
      toName: '',
      examlist: ['aa', 'bb', 'cc', 'dd'],
      timmer: null,
      rankTimmer: null
    }
  },
  computed: {
    ...mapState({
      hasLogin: (state) => {
        return state.user.isLogin
      },
      messageNum: (state) => {
        return state.user.messageNum
      },
      userName: (state) => {
        return state.user.username
      },
      unReceived: state => {
        return state.unreceived
      },
      levelInfoObj: state => state.levelInfoObj,
      level: state => state.user.level,
      isExam: state => state.user.isExam,
      examresult_status: state => state.examine.examresultbox
    }),
    loginStatus () {
      return this.$store.getters.loginStatus - 0
    },
    examineClass () {
      return ['examine', `exam-status${this.isExam}`]
    },
    routeName () {
      let name = this.$route.name
      return name
    },
    examTypes () {
      return examTypes
    },
    Token () {
      return getCookie('Token')
    }
  },
  methods: {
    ...mapActions(['fetchWarehouseId', 'getUserData']),
    // 轮询获取未读消息数量
    getMsg () {
      this.fetchSystemList()
      // this.getMsg()
      // this.timmer = setTimeout(() => {
      //   this.getMsg()
      // }, 80000)
    },
    // 获取未读消息数量
    async fetchSystemList () {
      let res = await systemMes(1, 10, false)
      res = res.data
      if (res.resultCode && res.resultCode === 2000) {
        this.$store.commit('MESSAGENUM', res.data.page.totalRecords)
      } else {
        this.$message({
          message: res.resultMsg,
          type: 'wraming'
        })
      }
    },
    exit () {
      let _this = this
      clearCookie('septActivityDate')
      clearCookie('Token') // token值
      this.$store.state.user.isLogin = false
      this.$store.commit('EXIT', true)
      this.$store.state.shopcart.cartlist = []
      this.$store.state.shopcart.shopCartId = ''
      // 分仓id
      // this.fetchWarehouseId(true)
      setTimeout(() => {
        _this.$router.push({name: 'Login'})
      }, 0)
    }
  },
  mounted () {
    if (this.loginStatus !== 4) {
      this.getUserData()
      this.getMsg()
    }
  },
  watch: {
    '$route' (to) {
      // 用户地址栏输入登录链接， 直接进行退出操作
      if (to.name === 'Login') {
        console.log('到了登陆页')
        this.exit()
      }
    }
    // loginStatus (val) {
    //   if (val !== 4) {
    //     if (this.timmer !== null) {
    //       clearTimeout(this.timmer)
    //     }
    //     this.getMsg()
    //   } else {
    //     if (this.timmer !== null) {
    //       clearTimeout(this.timmer)
    //       this.timmer = null
    //     }
    //   }
    // }
  }
}
</script>
<style  lang="scss" scoped>
    $primary-color: #333;
    body {
      color: $primary-color;  //编译后就成了 color:#333;类似于js的变量！
    }
    .head_nav{
      height: 36px;
      background: #363636;
      font-size: 12px; 
      line-height: 36px;
    }
    .login_nav{
      background: #ffffff;
      .headinfo{
        background: #ffffff;
        a {
          color: #303030;
        }
      }
    }
    .whitebg{
      background: #ffffff;
    }
    .register_text{

    }
    
    .head_logo{
      width: 30px;
      height: 30px;
      display: inline-block;
      background: #fff;
      vertical-align: middle;
      border-radius: 50%;
      margin-right: 3px;
      img{
        width: 100%;
        vertical-align: top;
      }
    }
    .headinfo {
      font-size: 0;
      line-height: 36px;
      height: 36px;
      background: #363636;
      a{
        position: relative;
        color: #fff;
        padding: 0 13px;
        font-size: 12px;
        cursor: pointer;
        &:first-child{
          border-left: none;
        }
      }
      .sep{
        position: relative;
        width: 2px;
        display: inline-block;
        padding:0;
        color: #858585;
      }
      .text{
        font-size: 12px;
      }
      .imme-login{
        text-decoration: underline;
      }
      .username{
        font-size:14px;
        color: #ffffff;
      }
    }
    .welcome{
      color: #FFF;
    }
    .head-level{
      position: relative;
      display: inline-block;
      width: 38px;
      height: 14px;
      background: #fdbc08;
      border-radius: 8px;
      line-height: 11px;
      padding: 2px 5px 2px 0;
      box-sizing: border-box;
      text-align: right;
      font-size: 12px;
      margin-left: 10px;
      vertical-align: middle;
      color: #ffffff;
      .head-level-icon{
        position: absolute;
        left: -3px;
        bottom: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        font-size: 12px;
        background: #FFEAA4;
        color: #FDBC08;
        text-align: center;
        line-height: 16px;
      }
    }
    .font-yellow{
      color: #FECC03;
    }
    .examine{
      border-radius: 4px;
      font-size: 12px;
      color: #FFCC00;
      padding: 2px 4px;
      cursor: pointer;
      color: #ffffff;
      line-height: 17px;
      padding: 3.5px 6px;
    }
    .exam-status1{
      background:rgba(253,188,8,1);
    }
    .exam-status0,.exam-status3,.exam-status4{
      background:rgba(0,148,255,1);
    }
    .exam-status2{
      background:rgba(153,153,153,1);
    }
    .head-phone{
      font-size: 12px;
      background: #6b6b6b;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      color: #f4f4f4;
      text-align: center;
      line-height: 16px;
    }
    .elbadge{
      position: absolute;
      background-color: #f56c6c;
      border-radius: 10px;
      color: #fff;
      display: inline-block;
      font-size: 8px;
      height: 18px;
      line-height: 18px;
      padding: 0 6px;
      text-align: center;
      white-space: nowrap;
      border: 1px solid #fff;
      &.is-dot{
        top: -6px;
        right: 1px;
        /* height: 8px; */
        /* width: 8px; */
        padding: 0px 2px;
        border-radius: 10px;
      }
    }
    .bubble-parent{
      position: relative;
      .bubble{
        position: absolute;
        top: 30px;
        left: 0;
        width: 150px;
        background: #FFDE00;
        color: #505050;
        font-size: 12px;
        line-height: 14px;
        padding: 6px 12px;
        border-radius: 5px;
        &:before{
          position: absolute;
          top: -11px;
          content: '';
          border: 7px solid transparent;
          border-bottom: 7px solid #FFDE00;
        }
      }
      .immediate-get{
        color: #036BEC;
        padding: 0 6px;
      }
    }


</style>


